<template>
	<view class="product-box">
		<view class="product-item">
			<view class="thnum" @click="goDetaile()">
				<image :src="$imageUrl(product.logo)"></image>
			</view>
			<view class="info">
				<view @click="goDetaile()">
					<view class="store-name">{{ product.store_name }}</view>
					<view class="name">{{ product.name }}</view>
				</view>
				<view class="other">
					<view class="statis">
						<view class="sale"><text>已售{{ product.sales_sum }}</text></view>
						<view class="eva"><text>好评{{ product.rating }}%</text></view>
					</view>
					<view class="price">
						<view class="price-item vip">
							<text class="hyjia">￥{{ sale_price }}</text>
						</view>
						<!-- <view class="price-item">
							<text class="shichangjia">￥{{ product.market_price }}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="spec-box">
			<view class="spec">
				<text :key="index" v-for="(guige ,index) in product.goods_spec" @click="selectType(index,guige)"
					:class="{active:current == index}"> {{guige.title}}</text>
			</view>
			<view class="buy">
				<view class="buy-btn" @click="buyNow()">立即订水</view>
			</view>
		</view>

		<view class="market" v-if="product.marketing.length>0">
			<text v-for="(item, index) in product.marketing" :key="index">活动{{index+1}}:{{item.title}}</text>
		</view>

		<water-sku ref="skuShow" :goods="goods"></water-sku>
	</view>
</template>

<script setup>
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		defineProps,
		computed,
	} from 'vue';

	defineOptions({
		name: 'water-goods'
	});

	const skuShow = ref(null);

	const props = defineProps({
		address: {
			type: Object,
			default: null,
		},
		isFreeQueuing: 0,
		goods: {
			type: Object,
			default: {},
		},
		deliveryCurrent: 0,
		deliveryTime: '',
		storeInfo: {
			type: Object,
			default: null,
		},
	})

	const product = computed(() => {
		initData(props.goods);
		return props.goods;
	})

	const state = reactive({
		current: 0,
		skuId: 'none',
		sale_price: 0,
		doAciton: 'detaile',
	});

	function initData(goods) {
		goods.goods_spec.forEach((item, index) => {
			if (item.id == 'none') {
				selectType(index, item, 0);
			}
		})
	}

	function goDetaile() {
		console.log('详情页');
		if (state.doAciton == "buy") {
			uni.$emit("buy_now", product);
		} else {
			let url = "/waterPages/water/product-detail?goods_id=" + product.id + "&is_free_queuing=" + props
				.isFreeQueuing
			uni.navigateTo({
				url: url
			})
		}
	}

	function selectType(index, data, buy_now = 1) {
		state.current = index;
		state.skuId = data.id;
		product.sale_price = data.price;
		state.sale_price = data.price;

		if (buy_now) {
			buyNow();
		}
	}

	function buyNow() {
		skuShow.value.open();
	}

	const {
		current,
		sale_price,
		skuId,
		doAciton,
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.product-box {
		margin: 0 0 $m24 0;
		padding: $m12;
		background: #fff;

		.product-item {
			width: 100%;
			display: flex;
			flex-direction: row;
			overflow: hidden;
			margin-bottom: $m16;
			border-radius: $radius-12;

			.thnum {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.info {
				flex: 1;
				padding: $m12;
				display: flex;
				flex-direction: column;
				align-self: start;

				.store-name {
					height: 36rpx;
					font-size: $font-24;
					color: #909399;
				}

				.name {
					height: 72rpx;
					font-size: $font-28;
					color: #303133;
					font-weight: 700;
				}

				.other {
					margin: $m8 0 0;
					position: relative;

					.statis {
						@include f-between;

						.sale {
							text {
								color: $u-tips-color;
								font-size: $font-24;
							}
						}

						.eva {
							text {
								color: $u-tips-color;
								font-size: $font-24;
							}
						}
					}

					.price {
						@include f-start;

						.price-item {
							line-height: 1;
							@include f-center;
							color: $u-tips-color;
							font-weight: 500;
							justify-content: left;

							.shichangjia {
								text-decoration: line-through;
								font-size: $font-24;
							}

							.tag {
								@include f-center;
								width: 28rpx;
								height: 28rpx;
								background-color: #ffc30f;
								font-size: $font-20;
								color: $u-reverse-color;
								border-radius: $radius-4;
							}

							&.vip {
								margin-right: $m24;
								font-size: $font-30;
								color: #fa3534;

								.tag {
									background-color: #fa3534;
								}

								.hyjia {
									font-weight: bold;
									color: #fa3534;
									font-size: $font-28;
								}
							}
						}
					}

				}
			}
		}

		.spec-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.spec {
				flex: 1;
				margin: 10rpx 0 0 0;

				text {
					display: inline-block;
					margin: 0 10rpx 10rpx 0;
					padding: 7rpx 12rpx;
					border-radius: 10rpx;
					background: #d3dff7;
					font-size: $font-26;
					color: #125cd7;

					&.active {
						background-color: #ffc30f;
						border-color: #ffc30f;
						color: $u-reverse-color;
					}
				}
			}

			.buy {
				.buy-btn {
					width: 160rpx;
					height: 60rpx;
					margin: 10rpx 30rpx 0 0;
					font-size: 26rpx;
					color: #ffffff;
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					border-color: #ffc30f;
					background: linear-gradient(to right, #125cd7, #279dfa);
				}

			}
		}
	}
</style>